﻿<div class="WAll PL PR PT">

	<div class="BlockLabel">KMUI提供了一套响应式、移动设备优先十分灵活的网格布局</div>
	<style>
		.GridShow .Row{margin-bottom:10px;}
		.GridShow [class^=Col]{border:1px solid #ccc;background-color:#fff;line-height:20px;padding:5px;margin-bottom:5px}
	</style>
	<div class="GridShow">
		<div class="ContentInnerTitle">有间隔</div>
		<div class="Row">
		  <div class="Col50">.Col50</div>
		  <div class="Col50">.Col50</div>
		</div>
		<div class="Row">
		  <div class="Col25">.Col25</div>
		  <div class="Col25">.Col25</div>
		  <div class="Col25">.Col25</div>
		  <div class="Col25">.Col25</div>
		</div>
		<div class="Row">
		  <div class="Col33">.Col33</div>
		  <div class="Col33">.Col33</div>
		  <div class="Col33">.Col33</div>
		</div>
		<div class="Row">
		  <div class="Col20">.Col20</div>
		  <div class="Col20">.Col20</div>
		  <div class="Col20">.Col20</div>
		  <div class="Col20">.Col20</div>
		  <div class="Col20">.Col20</div>
		</div>
		<div class="Row">
		  <div class="Col33">.Col33</div>
		  <div class="Col66">.Col66</div>
		</div>
		<div class="Row">
		  <div class="Col25">.Col25</div>
		  <div class="Col25">.Col25</div>
		  <div class="Col50">.Col50</div>
		</div>
		<div class="Row">
		  <div class="Col25">.Col25</div>
		  <div class="Col75">.Col75</div>
		</div>
		<div class="Row">
		  <div class="Col20">.Col20</div>
		  <div class="Col80">.Col80</div>
		</div>
		
		<div class="ContentInnerTitle">无间隔</div>
		
		<div class="Row NoGutter">
		  <div class="Col50">.Col50</div>
		  <div class="Col50">.Col50</div>
		</div>
		<div class="Row NoGutter">
		  <div class="Col25">.Col25</div>
		  <div class="Col25">.Col25</div>
		  <div class="Col25">.Col25</div>
		  <div class="Col25">.Col25</div>
		</div>
		<div class="Row NoGutter">
		  <div class="Col33">.Col33</div>
		  <div class="Col33">.Col33</div>
		  <div class="Col33">.Col33</div>
		</div>
		<div class="Row NoGutter">
		  <div class="Col20">.Col20</div>
		  <div class="Col20">.Col20</div>
		  <div class="Col20">.Col20</div>
		  <div class="Col20">.Col20</div>
		  <div class="Col20">.Col20</div>
		</div>
		<div class="Row NoGutter">
		  <div class="Col33">.Col33</div>
		  <div class="Col66">.Col66</div>
		</div>
		<div class="Row NoGutter">
		  <div class="Col25">.Col25</div>
		  <div class="Col25">.Col25</div>
		  <div class="Col50">.Col50</div>
		</div>
		<div class="Row NoGutter">
		  <div class="Col25">.Col25</div>
		  <div class="Col75">.Col75</div>
		</div>
		<div class="Row NoGutter">
		  <div class="Col20">.Col20</div>
		  <div class="Col80">.Col80</div>
		</div>
		<div class="ContentInnerTitle">嵌套</div>
		
		<div class="Row">
		  <div class="Col50">.Col50
			<div class="Row">
			  <div class="Col50">.Col50</div>
			  <div class="Col50">.Col50</div>
			</div>
		  </div>
		  <div class="Col50">.Col50
			<div class="Row">
			  <div class="Col33">.Col33</div>
			  <div class="Col66">.Col66</div>
			</div>
		  </div>
		</div>
		<div class="ContentInnerTitle">响应网格</div>
		
		<div class="Row">
		  <div class="Col100 Table50">.Col100 .Table50</div>
		  <div class="Col100 Table50">.Col100 .Table50</div>
		</div>
		<div class="Row">
		  <div class="Col50 Table25">.Col50 .Table25</div>
		  <div class="Col50 Table25">.Col50 .Table25</div>
		  <div class="Col50 Table25">.Col50 .Table25</div>
		  <div class="Col50 Table25">.Col50 .Table25</div>
		</div>
		<div class="Row">
		  <div class="Col100 Table40">.Col100 .Table40</div>
		  <div class="Col50 Table60">.Col50 .Table60</div>
		  <div class="Col50 Table66">.Col50 .Table66</div>
		  <div class="Col100 Table33">.Col50 .Table33</div>
		</div>
		<div class="BlockLabel">网格在手机/平板电脑上有不同的尺寸</div>
	</div>
	

</div>




















